<template>
   <view class="left clearfix bai">
		<uni-popup ref="popup" type="center">
			<view class="mobile-box left clearfix">
				<view class="mobile-title left clearfix relative">
					修改手机号码
					<view class="mobile-close absolute" @click="closePopup()">
						<uni-icons type="closeempty" size="20" color="#666"></uni-icons>
					</view>
				</view>
				
				<view class="mobile-item left clearfix">
					<input placeholder="请输入新手机号码" :focus="focus == 'mobile'?true:false" v-model="mobile" type="number" />
				</view>
				
				<view class="mobile-item left clearfix">
					<input placeholder="请输入验证码" v-model="code" :focus="focus == 'code'?true:false" type="number" style="width:60%;float:left;" />
					<view class="mobile-send-code right" @click="sendSms()" v-if="sendStatus==false">{{sendCodetext}}</view>
					<view class="mobile-send-code right"style="background:#eee;color:#999;" v-if="sendStatus==true">{{sendCodetext}}</view>
				</view>
				<view class="list-add-message left" v-if="errMssage">
					<uni-icons type="icon-cuo1" size="14" color="red" custom-prefix="iconfont" style="margin-right:3px;"></uni-icons>{{errMssage}}
				</view>
				
				<view class="list-add-message left" v-else>
					
				</view>
				
				<view class="mobile-submit left clearfix" @click="submitForm()">
					确定修改
				</view>
			</view>
		</uni-popup>
   </view>
</template>

<style scoped>
	.list-add-message{width:100%;line-height:30px;height:30px;font-size:14px;color:red;text-align: center;margin-top:20px;}
	.mobile-submit{width:70%;line-height:45px;margin-left:15%;background:#2979ff;text-align: center;color:#fff;font-size:14px;border-radius: 22.5px;margin-top:30px;cursor: pointer;}
	.mobile-send-code{width:120px;line-height:35px;background:#2979ff;text-align: center;color:#fff;font-size:14px;border-radius: 5px;margin:5px;cursor: pointer;}
	.mobile-item input{width:calc(100% - 10px);height:45px;line-height:45px;font-size:15px;padding-left:10px;font-weight:400;}
	.mobile-item{width:70%;height:45px;border:1px solid #ddd;margin-left:15%;margin-top:35px;border-radius: 5px;background:#fff;}
	.mobile-close{right:20px;top:0px;cursor: pointer;}
	.mobile-title{width:100%;height:50px;line-height:50px;text-align: center;font-size:16px;font-weight:500;}
	.mobile-box{width:550px;height:380px;border-radius: 10px;background-image: url('/static/images/body-bj.png'), linear-gradient(180deg, #e9f1ff, #f5f9ff);background-repeat: no-repeat;background-size: 100% auto;}
	.bai{width:100%;}
	/*清楚浮动*/
	.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
	.ellipsis {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
	/*左浮动*/
	.left{float:left;}
	
	/*右浮动*/
	.right{float:right;}
	
	/*相对定位*/
	.relative{position:relative;}
	
	/*绝对定位*/
	.absolute{position:absolute;}
	/*固定定位*/
	.fixed{position:fixed;}
</style>   


<script>
var login = uniCloud.importObject('login',{customUI:true});
export default {
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
           mobile: '',
            code: '',
			sendCodetext:'发送验证码',
			sendCode:null,//发送后的正确验证码
			sendStatus:false,//可以点击发送
			errMssage:'',//错误信息
			focus:'',
			interval:null
        };
    },
	watch:{
	  "show"(val){
		  if(val == true){
			  this.setShow();
		  }
	  }
	},
    methods: {
      setShow(){
		  this.$refs.popup.open();
	  },
	  //关闭弹窗
	  closePopup(){
		  this.$refs.popup.close();
		  this.sendCode = null;
		  this.sendCodetext = '发送验证码';
		  clearInterval(this.interval);
		  this.sendStatus = false;
		  this.$emit('close',false);
	  },
	  
	  //发送手机验证码
	  sendSms(){
	  	var that = this;
	  	var tel = this.mobile;
	  	if(!RegExp(/^1[3456789]\d{9}$/).test(tel)){
	  		this.errMssage = '请输入正确手机号码';
	  		this.focus = 'mobile';
	  		return false;
	  	}
	  	uni.showLoading({
	  		title:'发送中···'
	  	});
	  	//调用云函数来发送手机验证码
	  	var code = parseInt(Math.random()*999999);
		console.log('code',code);
	  	that.sendCode = code;
	  	login.sendSms(tel,code).then(res=>{
	  		uni.hideLoading()
	  		var time = 60;
	  		that.interval = setInterval(function(){
	  			if(time > 1){
	  				time--;
	  				that.sendCodetext = time+'重新获取';
	  				that.sendStatus = true;
	  			}else{
	  				that.sendStatus = false;
	  				that.sendCodetext = '获取验证码';
	  				clearInterval(that.interval);
	  			}
	  			
	  		},1000);
	  	}).catch(err=>{
	  		uni.hideLoading()
	  		uni.showToast({
	  			title: '发送过于频繁，请稍后再试！',
	  			duration: 2000,
	  			icon:'none'
	  		});
	  	});
	  	
	  },
	  //点击确定修改以后
	  submitForm(){
		  var mobile = this.mobile;
		  var code = this.code;
		  if(!RegExp(/^1[3456789]\d{9}$/).test(mobile)){
		  	this.errMssage = '请输入正确手机号码';
		  	this.focus = 'mobile';
		  	return false;
		  }
		  if(code != this.sendCode){
			  this.errMssage = '验证码错误';
			  this.focus = 'code';
			  return false;
		  }
		  this.closePopup();
		  this.mobile = '';
		  this.code = '';
		  this.$emit('confirm',{mobile:mobile,success:true});
	  }
    }
};
</script>

 